<template>
  <div>
    <Select
      ref="selectRef"
      filterable
      remote
      multiple
      placeholder="请选择角色"
      :max-tag-count="tagCount || 2"
      :remote-method="name=>bloc.load(name)"
      :value="roles"
      @on-open-change="selectChange"
      @on-change="valueChanged">
      <Option v-for="item in bloc.paged.items" :value="item.id" :key="item.id">{{ item.name }}</Option>
    </Select>
  </div>
</template>
<script lang='ts'>
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {RoleSelectorBloc} from '@/component/bloc/RoleSelectorBloc';
  import {isEmpty} from '@/base/util/Strings';

  @Component
  export default class UserSelector extends Vue {
    @Prop({type: Array})
    readonly roles!: Array<number>;
    @Prop({type: Number})
    readonly tagCount!: number;
    @Prop({default: 0, type: Number})
    readonly companyId!: number;

    bloc: RoleSelectorBloc = new RoleSelectorBloc();

    mounted() {
      this.bloc.load('', this.companyId);
    }

    valueChanged(value) {
      this.$emit('on-change', value);
    }

    selectChange() {
      const selectRef: any = this.$refs['selectRef'];
      if (selectRef.values) {
        selectRef.query = '';
      }
      if (isEmpty(selectRef.query)) {
        this.bloc.load('', this.companyId);
      }
    }
  }
</script>

<style lang='less'>
  .ivu-select-multiple .ivu-tag {
    height: 30px;
    line-height: 30px;
    margin: 4px 4px 3px 0;
  }

  .ivu-select-multiple .ivu-tag i {
    top: 7px;
  }
</style>
